<script setup>
import AppNavigation from '@/components/AppNavigation.vue'
</script>

<template>
  <div class="about">
    <van-nav-bar
      title="关于我们"
      fixed
    />
    
    <div class="content">
      <div class="about-card">
        <div class="logo-container">
          <van-image
            src="https://via.placeholder.com/150?text=大白话编程"
            width="120"
            height="120"
            round
          />
        </div>
        
        <h1 class="about-title">大白话编程</h1>
        <p class="about-desc">
          "大白话编程"是一家专注于编程教育的培训机构，致力于用通俗易懂的方式教授编程知识，让编程变得简单有趣。
        </p>
        
        <h2 class="section-title">我们的特点</h2>
        <van-cell-group inset>
          <van-cell title="简单易懂" icon="smile-o">
            <template #label>
              <span>用大白话讲解复杂的编程概念</span>
            </template>
          </van-cell>
          <van-cell title="注重实践" icon="fire-o">
            <template #label>
              <span>通过实际项目培养编程能力</span>
            </template>
          </van-cell>
          <van-cell title="贴近应用" icon="star-o">
            <template #label>
              <span>学习实用技术，紧跟行业发展</span>
            </template>
          </van-cell>
        </van-cell-group>
        
        <h2 class="section-title">联系我们</h2>
        <van-cell-group inset>
          <van-cell title="地址" icon="location-o">
            <template #label>
              <span>北京市海淀区中关村大街1号</span>
            </template>
          </van-cell>
          <van-cell title="电话" icon="phone-o">
            <template #label>
              <span>010-12345678</span>
            </template>
          </van-cell>
          <van-cell title="邮箱" icon="envelop-o">
            <template #label>
              <span>contact@daibaihua.com</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    
    <AppNavigation />
  </div>
</template>

<style scoped>
.about {
  padding-top: 46px;
  padding-bottom: 50px;
}

.content {
  padding: 16px;
}

.about-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.about-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
  color: #323233;
}

.about-desc {
  font-size: 14px;
  color: #646566;
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: justify;
}

.section-title {
  margin: 24px 0 16px;
  font-size: 18px;
  font-weight: bold;
  color: #323233;
}
</style> 